<template>
    <z-paging>
        <u-sticky>
            <hedsty :headCentext="'幸运抽奖'"></hedsty>
        </u-sticky>
        <view class="top_jiang_box">
            <image :src="DetailObj.image" mode="scaleToFill" />
        </view>
        <!-- <view class="shjian_box">
            <uni-countdown splitorColor="#ffffff" color="#ffffff" :day="DetailObj.days" :hour="DetailObj.hours"
                :minute="DetailObj.minutes" :second="DetailObj.seconds" :show-colon="false"></uni-countdown>后开奖
        </view> -->

        <view class="miaoshu_box">
            <view class="one_box">¥{{ DetailObj.price }}</view>
            <view class="two_box">{{ DetailObj.name }}</view>
        </view>
        <view class="hdgue_box">
            <view class="one_box">活动规则</view>
            <view class="thr_box">{{ DetailObj.content }}</view>
        </view>
        <view class="hdjl_box">
            <view class="one_box">活动奖励</view>
            <view class="dange_jiangpin_box" v-for="(item, index) in DetailObj.prize_arr" :key="index">
                <view class="left_box_tx">
                    <image :src="item.image" mode="widthFix" />
                </view>
                <view class="rt_box">
                    <view class="top1_box">{{ item.title }}</view>
                    <view class="top1jiage_box">{{ item.draw_level }}等奖{{ item.original_num }}份</view>
                    <view class="jiage_box">
                        价值：{{ item.price }}
                    </view>
                </view>
            </view>
        </view>

        <view class="renshunums_box">
            <view class="one_box">
                <view class="l_t_bvox">参与人员 {{ DetailObj.cy_total }}</view>
                <view class="r_t_bvox" @click="seeAll">
                    <view class="text_box">查看全部</view>
                    <view class="icon_box">
                        <u-icon name="arrow-right" color="#fff" size="14"></u-icon>
                    </view>
                </view>
            </view>
            <view class="canyuytouxian_bipx">
                <view class="dage_box" v-for="(item, index) in DetailObj.cy_data" :key="index">
                    <view class="top_box">
                        <view class="shuzi_box" v-if="Number(item.counts) > 1">{{ item.counts }}</view>
                        <image :src="item.avarat" mode="scaleToFill" />
                    </view>
                    <view class="nam_box">{{ item.nickname }}</view>
                </view>
            </view>
        </view>
        <view class="renshunums_box" v-if="DetailObj.zj_data.length > 0">
            <view class="one_box">
                <view class="l_t_bvox">中奖人员</view>
                <view class="r_t_bvox">
                    <view class="text_box" @click="seeAllzj">查看全部</view>
                    <view class="icon_box">
                        <u-icon name="arrow-right" color="#fff" size="14"></u-icon>
                    </view>
                </view>
            </view>
            <view class="canyuytouxian_bipx">
                <view class="dage_box" v-for="(item, index) in DetailObj.zj_data" :key="index">
                    <view class="top_box">
                        <!-- <view class="shuzi_box"></view> -->
                        <image :src="item.avarat" mode="scaleToFill" />
                    </view>
                    <view class="nam_box">{{ item.nickname }}</view>
                </view>
            </view>
        </view>

        <view style="height: 120rpx;"></view>
        <view class="btt_box">
            <view class="left_box" @click="participate">我的抽奖码</view>
            <view class="right_box" @click="jion">参与抽奖</view>
            <!-- <view class="right_box">已参与</view> -->
        </view>
        <u-popup :show="jionShow" mode="center" bgColor="transparent">
            <view class="beijing_box">
                <view class="biaoti_bpx">我的抽奖码</view>
                <view class="cjm_box" v-for="(item, index) in codeList" :key="index">{{ item.code }}</view>
                <view class="guanbi_box" @click="jionShow = false">关闭</view>
            </view>
        </u-popup>
        <u-modal :show="showModal" :showCancelButton="true" title="加入" @cancel="showModal = false" @confirm="confirmAction">
            <!-- 输入框 -->
            <u-input v-model="inputValue" type="text" placeholder="请输入内容" />
        </u-modal>
    </z-paging>
</template>
<script>
import hedsty from '../../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            days: 1,
            hours: 1,
            minutes: 1,
            seconds: 1,
            jionShow: false,
            luckyId: '',
            DetailObj: {
                prize_arr: [],
                cy_data: [],
                zj_data: []
            },
            codeList: [],
            zongji: 0,
            inputValue: '',
            showModal: false
        }
    },
    onLoad(e) {
        this.luckyId = e.id
    },
    onShow() {
        this.getDetail()
    },
    methods: {
        participate() {
            this.$Request.get(this.$api.user.luckDrawsMyDrawCode, { id: this.luckyId }).then(res => {
                if (res.code == 200) {
                    this.codeList = res.data
                    this.jionShow = true
                }
            })
        },
        seeAll() {
            this.$router('/userPage/luckydraw/who?id=' + this.DetailObj.id)
        },
        seeAllzj() {
            this.$router('/userPage/luckydraw/jadan?id=' + this.DetailObj.id)
        },
        getDetail() {

            this.zongji = 0
            this.$Request.get(this.$api.user.luckDrawsShow + `/${this.luckyId}`).then(res => {
                if (res.code == 200) {
                    this.DetailObj = res.data
                    res.data.cy_data.forEach(val => {
                        this.zongji += val.counts
                    });
                    console.log(this.zongji, 'this.zongji')
                }
            })
        },
        jion() {
            let that = this
            // #ifndef MP-ALIPAY
            uni.showModal({
                title: '加入',
                editable: true,
                placeholderText: '请输入随机码',
                success: function (res) {
                    if (res.confirm) {
                        console.log(res)
                        that.jairu(res.content)
                    } else if (res.cancel) {
                        console.log('用户点击取消');
                    }
                }
            });
            // #endif
            // #ifdef MP-ALIPAY
            that.showModal = true

            // #endif

        },
        confirmAction() {
            this.jairu(this.inputValue)
        },
        jairu(code) {
            this.$Request.post(this.$api.user.luckDrawsDraw, { code: code, id: this.luckyId }).then(res => {
                this.showModal = false
                if (res.code == 200) {
                    this.$msg(res.msg)
                }

                this.getDetail()
            })
        }
    }
}
</script>
<style lang="scss" scoped>
/deep/.uni-countdown__splitor {
    font-size: 32rpx !important;
}

/deep/.uni-countdown__number {
    font-size: 32rpx !important;
}

.top_jiang_box {
    width: 286rpx;
    height: 354rpx;
    margin: 16rpx auto;

    image {
        width: 100%;
        height: 100%;
    }
}

.shjian_box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Source Han Sans, Source Han Sans;
    font-weight: 500;
    font-size: 32rpx;
    color: #FFFFFF;
    margin-bottom: 16rpx;
}

.miaoshu_box {
    width: 682rpx;
    height: 190rpx;
    background: #200000;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    margin: auto;
    box-sizing: border-box;
    padding: 10rpx 32rpx;
    margin-bottom: 18rpx;

    .one_box {
        width: 100%;
        height: 70rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 48rpx;
        color: #EE5093;
        line-height: 70rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 5rpx;
    }

    .two_box {
        width: 100%;
        height: 52rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 36rpx;
        color: #FFFFFF;
        line-height: 52rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 5rpx;
    }

    .thr_box {
        width: 100%;
        height: 28rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 20rpx;
        color: #FFFFFF;
        line-height: 28rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
}

.hdgue_box {
    width: 682rpx;
    background: #200000;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    box-sizing: border-box;
    padding: 10rpx 32rpx;
    margin: auto;
    margin-bottom: 26rpx;

    .one_box {
        width: 100%;
        height: 46rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 46rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .thr_box {
        width: 100%;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 20rpx;
        color: #FFFFFF;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 20rpx;
    }
}

.hdjl_box {
    width: 682rpx;
    background: #200000;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    box-sizing: border-box;
    padding: 10rpx 32rpx;
    margin: auto;
    margin-bottom: 18rpx;
    padding-bottom: 20rpx;

    .one_box {
        width: 100%;
        height: 46rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 46rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-bottom: 8rpx;
    }

    .dange_jiangpin_box {
        width: 682rpx;
        height: 116rpx;
        display: flex;
        justify-content: flex-start;
        margin-bottom: 20rpx;

        .left_box_tx {
            width: 112rpx;
            height: 116rpx;
            background-image: url('https://morgan.dingxians.cn/static/fuyuri/16.png');
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 22rpx;

            image {
                width: 80rpx;
            }
        }

        .rt_box {
            width: 450rpx;
            height: 100%;
            box-sizing: border-box;
            padding-top: 10rpx;
            position: relative;

            .top1_box {
                width: 100%;
                height: 46rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 500;
                font-size: 32rpx;
                color: #EE5093;
                line-height: 46rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 10rpx;
            }

            .top1jiage_box {
                width: 100%;
                height: 34rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 34rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            .jiage_box {
                height: 34rpx;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 500;
                font-size: 24rpx;
                color: #FFFFFF;
                line-height: 34rpx;
                text-align: left;
                font-style: normal;
                text-transform: none;
                position: absolute;
                bottom: 20rpx;
                right: -40rpx;
            }
        }
    }
}


.renshunums_box {
    width: 697rpx;
    height: 218rpx;
    background-color: rgba(32, 0, 0, 1);
    margin: auto;
    padding-top: 14rpx;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    margin: 24rpx;

    .one_box {
        width: 100%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 33rpx;
        margin-bottom: 24rpx;

        .l_t_bvox {
            // width: 110rpx;
            height: 27rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 27rpx;
        }

        .r_t_bvox {
            height: 27rpx;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 27rpx;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            .text_box {}

            .icon_box {}
        }
    }

    .canyuytouxian_bipx {
        width: 100%;
        height: 150rpx;
        display: flex;
        justify-content: flex-start;
        box-sizing: border-box;
        padding: 0 53rpx;
        overflow: hidden;
        overflow-x: auto;

        .dage_box {
            width: 100rpx;
            height: 136rpx;
            margin-right: 28rpx;

            .top_box {
                width: 100rpx;
                height: 100rpx;
                border-radius: 50%;
                margin-bottom: 13rpx;
                background-color: #fff;
                position: relative;

                .shuzi_box {
                    width: 35rpx;
                    height: 35rpx;
                    border-radius: 50%;
                    text-align: center;
                    line-height: 35rpx;
                    position: absolute;
                    top: 0rpx;
                    right: 0rpx;
                    background-color: red;
                    color: #FFFFFF;
                    font-size: 22rpx;
                }

                image {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 50%;
                }
            }

            .nam_box {
                width: 100%;
                box-sizing: border-box;
                padding: 0 5rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                // height: 23rpx;
                font-family: PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                text-align: center;
                color: #FFFFFF;
                // line-height: 23rpx;
            }
        }
    }
}


.btt_box {
    position: fixed;
    width: 100%;
    height: 120rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 92rpx;
    bottom: 0;
    background-color: rgba(32, 0, 0, 1);

    .left_box {
        height: 120rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 30rpx;
        color: #FFFFFF;
        line-height: 120rpx;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .right_box {
        width: 212rpx;
        height: 76rpx;
        background-image: url('https://morgan.dingxians.cn/upload/20241028/671f328ab8cb9.png');
        background-size: 100% 100%;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 76rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }
}

.beijing_box {
    width: 698rpx;
    min-height: 316rpx;
    background-image: url('https://morgan.dingxians.cn/upload/20241028/671f328acc766.png');
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-top: 46rpx;
    position: relative;
    padding-bottom: 80rpx;

    .biaoti_bpx {
        width: 100%;
        height: 52rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 36rpx;
        color: #FFFFFF;
        line-height: 52rpx;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-bottom: 18rpx;
    }

    .cjm_box {
        width: 100%;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-bottom: 5rpx;
    }

    .guanbi_box {
        width: 170rpx;
        height: 60rpx;
        text-align: center;
        background-image: url('https://morgan.dingxians.cn/upload/20241028/671f328ab8cb9.png');
        background-size: 100% 100%;
        line-height: 60rpx;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 500;
        font-size: 28rpx;
        color: #FFFFFF;
        font-style: normal;
        text-transform: none;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10rpx;
        margin: auto;

    }
}
</style>